<template>
	<view>
		<uni-nav-bar :fixed="true" title="搜索" :border="false" @clickLeft="$pageBack()" left-icon="back" background-color="#ECE6D5" :status-bar="true"></uni-nav-bar>
		<view class="inputs flex">
			<image src="/static/search_b.png" mode=""></image>
			<input
				v-model="data.queryParams.content"
				placeholder-class="input_class"
				auto-focus="true"
				type="text"
				placeholder="输入会员昵称或ID"
				confirm-type="search"
				@confirm="handleSearch"
			/>
			<view v-if="data.queryParams.content" class="flex_jc_cent" style="width: 50rpx;" @click="clearInput">
				<uni-icons type="close" size="22" ></uni-icons>
			</view>
		</view>
		<view class="contents" v-if="data.list.length != 0">
			<view class="item flex_jc_sb" v-for="(item, index) in data.list" :key="index" style="height: 120rpx">
				<view class="items_l flex">
					<image v-if="item.img" :src="item.img" mode="aspectFill"></image>
					<image v-else src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png" mode="aspectFill"></image>
					<view class="">
						<view class="flex">
							<view class="t1">{{ item.name }}</view>
							<view class="t2" v-if="item.vipType">{{ $userStatus(item.vipType) }}{{ item.id }}</view>
						</view>
						<view class="t3">到期时间：{{ item.vipTimeEnd }}</view>
					</view>
				</view>
				<view class="items_r flex" v-if="item.id !=userData.id ">
					<view v-if="item.vip == 2" class="btn" @click="goManagement(item)">管理</view>
					<view class="btn" @click="openPop(item)">赠送</view>
				</view>
			</view>
		</view>
		<view class="kong" v-if="data.queryParams.content && data.list.length == 0 && data.isshow">
			<image src="/static/k.png" mode=""></image>
			<view class="text">
				没有找到你搜索的内容
				<view class="">换个关键词试试~</view>
			</view>
		</view>
		<!-- 赠送弹窗 -->
		<uni-popup ref="popupSend" type="center" >
			<view class="globalPopup">
				<uni-icons @click="close" type="closeempty" size="20" class="close" color="#AEAEAE"></uni-icons>
				<view class="title">赠送稻穗值</view>
				<view class="content_s">
					<view class="tss">我的稻穗值：{{ userData.points }}</view>
					<view class="tss">稻友ID：{{ params.userId }}</view>
					<view class="dinput">
						<input v-model="params.points" placeholder-class="input_text" type="number" placeholder="请输入" />
					</view>
				</view>
				<view class="btns flex_jc_sb">
					<view class="bt b1" @click="close">取消</view>
					<view class="bt b2" @click="handleConfirm">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad, onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import { getGroupList,transferPoints } from '@/api/branch/member.js';
import { getData } from '@/api/user.js';
import { toast, showConfirm } from '@/utils/common.js';
const data = reactive({
	isshow:false,
	list: [],
	total: 0,
	queryParams: {
		timeType: '0',
		content: '',
		pageNum: 1,
		pageSize: 1000
	}
});
const popupSend = ref(null);
const close = () => {
	popupSend.value.close();
};
// 赠送稻穗值
const params = reactive({
	userId: 0, // 接收人ID
	points:''
});
const openPop = (item) => {
	params.userId = item.id;
	popupSend.value.open();
};
const handleConfirm = () => {
	if (params.points == '') {
		toast('请输入');
		return;
	}
	if (params.points > userData.points) {
		toast('赠送数量超出自身');
		return;
	}
	transferPoints(params).then((res) => {
		if (res.code == 200) {
			toast('已成功赠送稻穗');
			setTimeout(()=>{
				close();
			},500)
		}
	});
};
const userData = reactive({})
onLoad(()=>{
	getData({}).then((res) => {
		if (res.code == 200) {
			Object.assign(userData, res.data);
		}
	});
})
const getList = () => {
	getGroupList(data.queryParams).then((res) => {
		if(res.code == 200){
			data.list.push(...res.rows)
			data.isshow = true
		}
	});
};
const handleSearch = (e) => {
	if (data.queryParams.content == '') {
		uni.showToast({ title: '请输入搜索内容', icon: 'none' });
		return;
	}
	data.list = []
	// 每次搜索重置为第一页
	data.queryParams.pageNum = 1;
	getList();
};
// 清空输入框的方法
const clearInput = () => {
	data.queryParams.content = '';
	data.list = [];
	data.isshow = false;
};
const goManagement = (item) => {
	uni.setStorageSync('management', item);
	uni.navigateTo({
		url: '/mypage/usertabbar/management'
	});
};
</script>
<style lang="scss">
	.globalPopup {
		.content_s {
			.tss {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #8f8f8b;
				margin-top: 20rpx;
			}
			.dinput {
				margin: 20rpx auto 40rpx;
				width: 100%;
				height: 80rpx;
				background: #ffffff;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 1px solid #dadada;
				input {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000;
					height: 80rpx;
					line-height: 80rpx;
					padding-left: 15rpx;
				}
			}
	
			.content_item {
				height: 56rpx;
				margin: 30rpx auto;
				.i_l {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #75613e;
					margin-right: 20rpx;
				}
	
				.i_r {
					flex: 1;
					height: 56rpx;
					background: #eeeeee;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					input {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #000;
						height: 56rpx;
						line-height: 56rpx;
						padding-left: 18rpx;
					}
				}
			}
		}
	}
page {
	background: #f7f8f6;
}
.kong {
	width: 360rpx;
	margin: 260rpx auto;
	image {
		width: 360rpx;
		height: 236rpx;
	}
	.text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #979797;
		margin-top: 50rpx;
		text-align: center;
	}
}
.input_class {
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 28rpx;
	color: #cacaca;
}
.inputs {
	width: 710rpx;
	height: 80rpx;
	background: #ffffff;
	border-radius: 40rpx;
	margin: 20rpx auto;
	padding: 24rpx 32rpx;
	box-sizing: border-box;
	image {
		width: 32rpx;
		height: 32rpx;
	}
	input {
		flex:1;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #000;
		padding-left: 15rpx;
	}
}
.contents {
	.item {
		width: 710rpx;
		height: 112rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;
		padding: 20rpx;
		box-sizing: border-box;
		.items_l {
			image {
				width: 72rpx;
				height: 72rpx;
				border-radius: 40rpx;
				margin-right: 18rpx;
			}
			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #1b1b1b;
			}
			.t2 {
				display: inline-block;
				height: 32rpx;
				background: rgba(216, 198, 167, 0.5);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1px solid #75613e;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #75613e;
				line-height: 32rpx;
				text-align: center;
				margin-left: 15rpx;
				padding: 0rpx 15rpx;
			}
			.t3 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #aeaeac;
				margin-top: 12rpx;
			}
		}
		.items_r {
			.btn {
				width: 68rpx;
				height: 44rpx;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				border: 1px solid #75613e;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #75613e;
				line-height: 44rpx;
				text-align: center;
				margin-left: 15rpx;
			}
		}
	}
}
</style>
